<template>
	<view class="wrap">
		<view class="header_bg">
			<u-modal v-model="show" title="数据说明" :title-style="{color: '#005dff'}" >	
				<view class="modal_text" style="padding: 40rpx;">
					<text>数据来源：全部数据来源于国家卫健委、各省市区卫健委、各省市区政府以及港澳台官方渠道。 </text>
					<br/>
					<br/>
					<p>1. 本页面的全国疫情数据包括31个省区市、新疆生产建设兵团和港澳台地区的疫情数据。</p>
					<br/>
					<p>2. 国家卫健委公布数据时，全国总数与国家卫健委保持一致。</p>
					<br/>
					<p>3. 各省卫健委陆续公布数据，如果各省数据总和已经超过之前国家卫健委总数，则直接使用各省数据总和作为全国总数。（计算时，各省的“现有确诊”用“现有确诊人数 = 累计确诊人数 - 累计治愈人数 - 累计死亡人数”计算得到，“现有疑似”仅使用国家卫健委每天公布的现有疑似病例总数，而不做新增累计）</p>
					<br/>
					<p>4. “现有确诊”、“累计确诊”、“现有重症”、“治愈”和“死亡”的“较上日”是指每两天间的新增数值，由当前的全国总数减去国家卫健委前一天公布的数据得到。这个值会随着全国总数的变动而实时变化。</p>
				</view>
				
			</u-modal>	
			<view class="header_bgimg">
				<view class="header_title"></view>
				<view class="header_text" @click="handleExplain">
					数据来源：国家及各地卫健委每日信息发布
					<u-icon name="question-circle"></u-icon>
				</view>
			</view>
		</view>
		
		<view class="time" style="font-weight: 600;color:#222222;margin-left: 60rpx;">统计截至：{{nowTime}}</view>
		<view class="content">	
			<view class="header">
				<u-row gutter="12">
							<u-col span="4">
								<view class="demo-layout localConfirm">
									<view class="localConfirm_text">
										<view class="add">较上日<text class="computeList">{{(this.ChinaList.localConfirm-this.Last.localConfirm)>=0?"+":''}}{{this.ChinaList.localConfirm-this.Last.localConfirm}}</text></view>
										<view class="number">{{this.ChinaList.localConfirm}}</view>
										<view class="text">本土现有确诊</view>
									</view>
								</view>
							</u-col>
							<u-col span="4">
								<view class="demo-layout nowConfirm">
									<view class="nowConfirm_text">
										<view class="add">较上日<text class="computeList">{{(this.ChinaList.nowConfirm-this.Last.nowConfirm)>=0?"+":'' }}{{this.ChinaList.nowConfirm-this.Last.nowConfirm}}</text></view>
										<view class="number">{{this.ChinaList.nowConfirm}}</view>
										<view class="text">现有确诊</view>
									</view>
								</view>
							</u-col>
							<u-col span="4">
								<view class="demo-layout confirm">
									<view class="confirm_text">
										<view class="add">较上日<text class="computeList">{{(this.ChinaList.confirm-this.Last.confirm)>=0?"+":'' }}{{this.ChinaList.confirm-this.Last.confirm}}</text></view>
										<view class="number">{{this.ChinaList.confirm}}</view>
										<view class="text">累计确诊</view>
									</view>
								</view>
							</u-col>
						</u-row>
						<u-row gutter="12" justify="space-between">
							<u-col span="4">
								<view class="demo-layout nowSevere">
									<view class="nowSevere_text">
										<view class="add">较上日<text class="computeList">{{(this.ChinaList.noInfect-this.Last.noInfect)>=0?"+":'' }}{{this.ChinaList.noInfect-this.Last.noInfect}}</text></view>
										<view class="number">{{this.ChinaList.noInfect}}</view>
										<view class="text">无症状感染者</view>
									</view>
								</view>
							</u-col>
							<u-col span="4">
								<view class="demo-layout import">
									<view class="import_text">
										<view class="add">较上日<text class="computeList">{{(this.ChinaList.importedCase-this.Last.importedCase)>=0?"+":'' }}{{this.ChinaList.importedCase-this.Last.importedCase}}</text></view>
										<view class="number">{{this.ChinaList.importedCase}}</view>
										<view class="text">境外输入</view>
									</view>
								</view>
							</u-col>
							<u-col span="4">
								<view class="demo-layout dead">
									<view class="dead_text">
										<view class="add">较上日<text class="computeList">{{(this.ChinaList.dead-this.Last.dead)>=0?"+":'' }}{{this.ChinaList.dead-this.Last.dead}}</text></view>
										<view class="number">{{this.ChinaList.dead}}</view>
										<view class="text">累计死亡</view>
									</view>
								</view>
							</u-col>
						</u-row>
			</view>
			<!-- 近31日本土新增 -->
			
			<view style="margin-top: 20rpx;" >
				<view class="latest">
					<span style="font-weight: 700;color:#22222;font-size: 32rpx;">近期31省市本土病例</span>
					
				</view>
				<u-row gutter="15" >
							<u-col span="3" style="flex:0">
								<view class="demo-layout localConfirm" style="width: 120rpx;height:62rpx;text-align: center;line-height:62rpx;color:#4180f1;font-weight: 700;background-color: #eef4ff;">城市(区)</view>
							</u-col>
							<u-col span="3" style="flex:0">
								<view class="demo-layout nowConfirm" style="width: 120rpx;height:62rpx;text-align: center;line-height:62rpx;color:#4180f1;font-weight: 700;background-color: #eef4ff;">省市区</view>
							</u-col>
							<u-col span="3" style="flex:0">
								<view class="demo-layout confirm" style="width: 120rpx;height:62rpx;text-align: center;line-height:62rpx;color:#4180f1;font-weight: 700;background-color: #eef4ff;">新增</view>
							</u-col>
							<u-col span="3" style="flex:0">
								<view class="demo-layout nowSevere" style="width: 120rpx;height:62rpx;text-align: center;line-height:62rpx;color:#4180f1;font-weight: 700;background-color: #eef4ff;">现有确诊</view>
							</u-col>
							<u-col span="3" style="flex:0">
								<view class="demo-layout dead" style="width: 140rpx;height:62rpx;text-align: center;line-height:62rpx;color:#4180f1;font-weight: 700;background-color: #eef4ff;">区域风险</view>
							</u-col>
				</u-row>
				<u-row gutter="15" v-for="(item,index) in latestLocal" :key="item.city">
							<u-col span="4" style="flex:0" >
								<view class="demo-layout " style="width: 120rpx;height:62rpx;text-align: center;line-height: 62rpx;" >{{item.city}}</view>
							</u-col>
							<u-col span="3" style="flex:0">
								<view class="demo-layout " style="width: 120rpx;height:62rpx;text-align: center;line-height: 62rpx;" >{{item.province}}</view>
							</u-col>
							<u-col span="3" style="flex:0">
								<view class="demo-layout special_add" :style="item.confirmAdd>0?'color:red;width: 120rpx;height:62rpx;text-align: center;line-height: 62rpx;':'color:#178b50;width: 120rpx;height:62rpx;text-align: center;line-height: 62rpx;'" >{{(item.confirmAdd)>0?"+":'' }}{{item.confirmAdd}}</view>
							</u-col>
							<u-col span="3" style="flex:0">
								<view class="demo-layout " style="width: 120rpx;height:62rpx;text-align: center;line-height: 62rpx;" >{{item.nowConfirm}}</view>
							</u-col>
							<u-col span="3" style="flex:0">
								<view class="demo-layout" style="width: 140rpx;height:62rpx;text-align: center;line-height: 62rpx; white-space: nowrap;" >{{item.grade}}</view>
							</u-col>
				</u-row>
			</view>
			
			<!-- 国内疫苗跟踪 -->
			<view class="ymTop">
				<view class="ymTop_header">
					<view class="ymTitle">国内新冠疫苗接种跟踪</view>
					<view class="ymDetail" @click="handleToVaccine">查看详情<u-icon name="arrow-right" color="#7c7c7c"></u-icon></view>
				</view>
				<view class="ymContent">
					<view class="ymContentBox">
						<view>累计接种</view>
						<view class="ymTotal">
							<view class="ymNum">{{this.ymTotal|Totalfilter}}</view>
							<view class="ymText">亿剂</view>
						</view>
					</view>
					
					<view class="ymContentBox2">
						<view>较上日新增</view>
						<view class="ymAdd">
							<view class="ymNum">{{this.ymAdd|Addfilter}}</view>
							<view class="ymText">万剂</view>
						</view>
					</view>
					
					<view class="ymContentBox3">
						<view>每百人接种</view>
						<view class="ymRate">
							<view class="ymNum">{{this.ymHundred}}</view>
							<view class="ymText">剂</view>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		
		<!-- 新增图表 -->
		<view v-if="showEAdd">
			<view class="eheader">本土新增确诊趋势</view>
			<view class="echart_card" style="height: 490rpx;">
				<view class="echart_img">
					<echarts :option="optionAdd" style="height: 480rpx;"></echarts>
				</view>
			</view>
		</view>
		
		<!-- 现有图表 -->
		<view v-else="showENow">
			<view class="eheader">本土现有确诊趋势</view>
			<view class="echart_card" style="height: 490rpx;">
				<view class="echart_img">
					<echarts :option="option" style="height: 480rpx;"></echarts>
				</view>
			</view>
		</view>
		
		<view class="eButton">
			<view class="addLocal"><u-button :plain="true" @click="showAdd" :type="colorA">本土新增确诊趋势</u-button></view>
			<view class="nowLocal"><u-button :plain="true" @click="showNow" :type="colorN">本土现有确诊趋势</u-button></view>	
		</view>
		
		<!-- 无症状感染者 -->
		<view v-if="showEAddPro">
			<view class="eheader">新增无症状感染者</view>
			<view class="echart_card">
				<view class="echart_img">
					<echarts :option="optionPro" style="height: 480rpx;"></echarts>
				</view>
			</view>
		</view>
		<view v-else="showENowConfirm">
			<view class="eheader">现有无症状感染者</view>
			<view class="echart_card">
				<view class="echart_img">
					<echarts :option="optionConfirm" style="height: 480rpx;"></echarts>
				</view>
			</view>
		</view>
		<view class="eButton">
			<view class="addLocal"><u-button :plain="true" @click="showAddPro" :type="colorAPro">新增无症状感染者</u-button></view>
			<view class="nowLocal"><u-button :plain="true" @click="showNowConfirm" :type="colorNConfirm">现有无症状感染者</u-button></view>	
		</view>
		
		
		<!-- 全国现有趋势 -->
		<view v-if="showEAdd1">
			<view class="eheader">全国现有确诊趋势</view>
			<view class="echart_card" style="height: 490rpx;">
				<view class="echart_img">
					<echarts  :notMerge="notMerge" :lazyUpdate="notMerge" :option="optionAdd1"  style="height: 480rpx;"></echarts>
				</view>
			</view>
		</view>
		<view v-else-if="showEAdd2">
			<view class="eheader">全国疫情新增趋势</view>
			<view class="echart_card" style="height: 490rpx;">
				<view class="echart_img">
					<echarts :notMerge="notMerge" :lazyUpdate="notMerge":option="optionAdd2" style="height: 480rpx;"></echarts>
				</view>
			</view>
		</view>
		<view v-else-if="showEAdd3">
			<view class="eheader">全国疫情累计趋势</view>
			<view class="echart_card"  style="height: 490rpx;">
				<view class="echart_img">
					<echarts :notMerge="notMerge" :lazyUpdate="notMerge" :option="optionAdd3" style="height: 480rpx;" ></echarts>
				</view>
			</view>
		</view>
		<view v-else="showEAdd4">
			<view class="eheader">治愈率及死亡率</view>
			<view class="echart_card" style="height: 490rpx;">
				<view class="echart_img">
					<echarts :notMerge="notMerge" :lazyUpdate="notMerge" :option="optionAdd4" style="height: 480rpx;" ></echarts>
				</view>
			</view>
		</view>
		<view class="eButton" style="justify-content: center;flex-wrap: wrap;margin-top: 50rpx;" >
			<view class="addLocal" ><u-button :plain="true" @click="showAdd1" :type="color1">全国现有确诊趋势</u-button></view>
			<view class="addLocal" ><u-button :plain="true" @click="showAdd2" :type="color2">全国疫情新增趋势</u-button></view>	
			<view class="addLocal" ><u-button :plain="true" @click="showAdd3" :type="color3">全国疫情累计趋势</u-button></view>	
			<view class="addLocal" ><u-button :plain="true" @click="showAdd4" :type="color4">治病率死亡率</u-button></view>	
			
		</view>
	
	
		<!-- 中国疫情 -->
		<view class="China">
			<view class="search_box" style="margin:0 0 10rpx 36rpx;">
				<u-search placeholder="请输入省份" :show-action="false" shape="round" :clearabled="true" @change="searchCity()" v-model="search"></u-search>
			</view>
			<view>
				<view class="ChinaTitle">中国疫情(包括港澳台)</view>
				<view class="tips">7:00-10:00为更新高峰，数据如有滞后请谅解。</view>
			</view>
			
			<view class="table">
				<u-row gutter="15" >
							<u-col span="3" style="flex:0">
								<view class="demo-layout localConfirm" style="width: 120rpx;height:62rpx;text-align: center;line-height:62rpx;color:#22222;font-weight: 700;">地区</view>
							</u-col>
							<u-col span="3" style="flex:0">
								<view class="demo-layout nowConfirm" style="width: 120rpx;height:62rpx;text-align: center;line-height:62rpx;color:#005dff;font-weight: 700;">现有</view>
							</u-col>
							<u-col span="3" style="flex:0">
								<view class="demo-layout confirm" style="width: 120rpx;height:62rpx;text-align: center;line-height:62rpx;color:#f55253;font-weight: 700;">累计</view>
							</u-col>
							<u-col span="3" style="flex:0">
								<view class="demo-layout nowSevere" style="width: 120rpx;height:62rpx;text-align: center;line-height:62rpx;color:#178b50;font-weight: 700;">治愈</view>
							</u-col>
							<u-col span="3" style="flex:0">
								<view class="demo-layout dead" style="width: 120rpx;height:62rpx;text-align: center;line-height:62rpx;color:#4e5a65;font-weight: 700;">死亡</view>
							</u-col>
				</u-row>
				<u-row gutter="15" v-for="(item,index) in cityList" :key="item.provinceName" v-if="!search">
							<u-col span="4" style="flex:0" >
								<view class="demo-layout localConfirm" style="width: 120rpx;height:62rpx;text-align: center;line-height: 62rpx;" >{{item.provinceName.slice(0,2)}}</view>
							</u-col>
							<u-col span="3" style="flex:0">
								<view class="demo-layout nowConfirm" style="width: 120rpx;height:62rpx;text-align: center;line-height: 62rpx;" >{{item.currentConfirmedNum}}</view>
							</u-col>
							<u-col span="3" style="flex:0">
								<view class="demo-layout confirm" style="width: 120rpx;height:62rpx;text-align: center;line-height: 62rpx;" >{{item.confirmedNum}}</view>
							</u-col>
							<u-col span="3" style="flex:0">
								<view class="demo-layout nowSevere" style="width: 120rpx;height:62rpx;text-align: center;line-height: 62rpx;" >{{item.curedNum}}</view>
							</u-col>
							<u-col span="3" style="flex:0">
								<view class="demo-layout dead" style="width: 120rpx;height:62rpx;text-align: center;line-height: 62rpx;" >{{item.deadNum}}</view>
							</u-col>
				</u-row>
				<u-row gutter="15"  v-if="search" v-for="item in this.searchCityList" :key="item.provinceName">
							<u-col span="4" style="flex:0" >
								<view class="demo-layout localConfirm" style="width: 120rpx;height:62rpx;text-align: center;line-height: 62rpx;" >{{item.provinceName.slice(0,2)}}</view>
							</u-col>
							<u-col span="3" style="flex:0">
								<view class="demo-layout nowConfirm" style="width: 120rpx;height:62rpx;text-align: center;line-height: 62rpx;" >{{item.currentConfirmedNum}}</view>
							</u-col>
							<u-col span="3" style="flex:0">
								<view class="demo-layout confirm" style="width: 120rpx;height:62rpx;text-align: center;line-height: 62rpx;" >{{item.confirmedNum}}</view>
							</u-col>
							<u-col span="3" style="flex:0">
								<view class="demo-layout nowSevere" style="width: 120rpx;height:62rpx;text-align: center;line-height: 62rpx;" >{{item.curedNum}}</view>
							</u-col>
							<u-col span="3" style="flex:0">
								<view class="demo-layout dead" style="width: 120rpx;height:62rpx;text-align: center;line-height: 62rpx;" >{{item.deadNum}}</view>
							</u-col>
				</u-row>
			</view>
			<view class="none">
				<u-divider>没有更多了</u-divider>
			</view>
		</view>
	
		<view class="tipa" @click="handleExplain">
			数据来源：各地卫健委每日公开数据
			<u-icon name="question-circle"></u-icon>
		</view>
		
		<view class="info">
			<h2>新冠肺炎预防须知</h2>
		</view>
		<view class="infoBox">
			<view class="person">
				<u-icon name="info-circle-fill" color="#005FFE" style="margin: 50rpx 20rpx;"></u-icon>
				个人清洁
			</view>
			<view class="personTip">
				<view class="personText"><view class="box"></view><view>经常保持双手清洁，尤其在触摸口、鼻或眼之前。</view></view>
				<view class="personText" ><view class="box"></view><view style="height: 64rpx;width:616rpx">经常用洗手液和清水清洗双手，搓手最少20秒，并用纸巾擦干。</view></view>
				<view class="personText"><view class="box"></view><view style="height: 64rpx;width:616rpx">打喷嚏或咳嗽时应用纸巾掩盖口鼻，把用过的纸巾弃置于有盖垃圾箱内，然后彻底清洁双手。</view></view>	
			</view>
			
			<view class="person">
				<u-icon name="minus-circle-fill" color="#FF2828" style="margin: 50rpx 20rpx;"></u-icon>
				尽量避免
			</view>
			<view class="personTip">
				<view class="personText"><view class="box"></view><view>经常保持双手清洁，尤其在触摸口、鼻或眼之前。</view></view>
				<view class="personText" ><view class="box"></view><view style="height: 64rpx;width:616rpx">经常用洗手液和清水清洗双手，搓手最少20秒，并用纸巾擦干。</view></view>
				<view class="personText"><view class="box"></view><view style="height: 64rpx;width:616rpx">打喷嚏或咳嗽时应用纸巾掩盖口鼻，把用过的纸巾弃置于有盖垃圾箱内，然后彻底清洁双手。</view></view>	
			</view>
			
			<view class="person">
				<u-icon name="plus-circle-fill" color="#00C170" style="margin: 50rpx 20rpx;"></u-icon>
				尽快就诊
			</view>
			<view class="personTip">
				<view class="personText"><view class="box"></view><view>如有身体不适，特别是有发烧或咳嗽，应戴上外科口罩并尽快就诊。</view></view>
			</view>
		</view>		
		<u-back-top :scroll-top="scrollTop"></u-back-top>
		
	</view>
</template>

<script>
	import  echarts from '@/components/echarts/echarts.vue';
	export default {
		components:{
			echarts
		},
		filters:{
			Totalfilter(data){
				data = data + '';
				// data = data.slice(0,-7).slice(0,-1)+'.'+data.slice(0,-7).slice(-1)
				data=(data/100000000).toFixed(1);
				return data;
						},
			Addfilter(data){
				data = data + '';
				// data = data.slice(0,-4)
				data=data/10000;
				return data;
			}
		},
		data() {
			return {
				
				latestLocal:[],
				searchCityList:[],
				search:'',
				scrollTop: 0,
				cityList:[],
				notMerge:true,
				// 全国趋势1
				List1:[],
				color1:"primary",
				color2:"",
				color3:"",
				color4:"",
				showEAdd1:true,
				showEAdd2:false,
				showEAdd3:false,
				showEAdd4:false,
				optionAdd1 : {
				    tooltip: {
				        trigger: 'axis'
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    
				    xAxis: {
				        type: 'category',
				        boundaryGap: false,
				        data: []
				    },
				    yAxis: {
				        type: 'value'
				    },
				    series: [
				        {
				            name: '全国现有确诊',
				            type: 'line',
				            itemStyle: {
				                     normal: {
				                       color: "#FE7B7C",//折线点的颜色
				                       lineStyle: {
				                       color: "#FE7B7C"//折线的颜色
				                      }
				                    }
				              },			
				            data: []
				        },
				        
				    ]
				},
				optionAdd2 : {
				    tooltip: {
				        trigger: 'axis'
				    },
				    legend: {
				        data: ['新增确诊', '新增疑似']
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },   
				    xAxis: {
				        type: 'category',
				        boundaryGap: false,
				        data: []
				    },
				    yAxis: {
				        type: 'value'
				    },
				    series: [
				        {
				            name: '新增确诊',
				            type: 'line',
				            itemStyle: {
				                     normal: {
				                       color: "rgb(255,84,86)",//折线点的颜色
				                       lineStyle: {
				                       color: "rgb(255,84,86)"//折线的颜色
				                      }
				                    }
				              },			
				            data: []
				        },
				        {
							itemStyle: {
							         normal: {
							           color: "rgb(255,212,96)",//折线点的颜色
							           lineStyle: {
							           color: "rgb(255,212,96)"//折线的颜色
							          }
							        }
							  },		
				            name: '新增疑似',
				            type: 'line',				      
				            data: []
				        }
				    ]
				},
				optionAdd3 : {
				    tooltip: {
				        trigger: 'axis'
				    },
				    legend: {
				        data: ['累计确诊', '累计治愈','累计死亡']
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    
				    xAxis: {
				        type: 'category',
				        boundaryGap: false,
				        data: []
				    },
				    yAxis: {
				        type: 'value'
				    },
				    series: [
				        {
				            name: '累计确诊',
				            type: 'line',
				            itemStyle: {
				                     normal: {
				                       color: "#be2121",//折线点的颜色
				                       lineStyle: {
				                       color: "#be2121"//折线的颜色
				                      }
				                    }
				              },			
				            data: []
				        },
				        {
							itemStyle: {
							         normal: {
							           color: "#178b50",//折线点的颜色
							           lineStyle: {
							           color: "#178b50"//折线的颜色
							          }
							        }
							  },		
				            name: '累计治愈',
				            type: 'line',				      
				            data: []
				        },
						{
							itemStyle: {
							         normal: {
							           color: "#4e5a65",//折线点的颜色
							           lineStyle: {
							           color: "#4e5a65"//折线的颜色
							          }
							        }
							  },		
						    name: '累计死亡',
						    type: 'line',				      
						    data: []
						}
				    ]
				},
				optionAdd4 : {
				    tooltip: {
				        trigger: 'axis'
				    },
				    legend: {
				        data: ['治愈率', '死亡率']
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    
				    xAxis: {
				        type: 'category',
				        boundaryGap: false,
				        data: []
				    },
				    yAxis: {
				        type: 'value'
				    },
				    series: [
				        {
				            name: '治愈率',
				            type: 'line',
				            itemStyle: {
				                     normal: {
				                       color: "#178b50",//折线点的颜色
				                       lineStyle: {
				                       color: "#178b50"//折线的颜色
				                      }
				                    }
				            },			
				            data: []
				        },
				        {
							itemStyle: {
							         normal: {
							           color: "#4e5a65",//折线点的颜色
							           lineStyle: {
							           color: "#4e5a65"//折线的颜色
							          }
							        }
							  },		
				            name: '死亡率',
				            type: 'line',				      
				            data: []
				        }
				    ]
				},
				// <!-- 无症状感染者 -->
				colorAPro:"primary",
				colorNConfirm:"",
				showEAddPro:true,
				showENowConfirm:false,
				optionConfirm : {
				    xAxis: {
				        type: 'category',
				        data: []
				    },
				    yAxis: {
				           type: 'value'
				       },
				    series: [{
				        data: [],
				        type: 'bar'
				    }]
				},
				optionPro : {
				    xAxis: {
				        type: 'category',
				        data: []
				    },
				    yAxis: {
				           type: 'value'
				       },
				    series: [{
				        data: [],
				        type: 'bar',
						itemStyle: {
						         normal: {
						           color: "rgb(255,120,81)",//折线点的颜色
						           lineStyle: {
						           color: "rgb(255,120,81)"//折线的颜色
						          }
						        }
						  },		
				    }]
				},
				province:[],
				provinceConfirm:[],
				colorA:"primary",
				colorN:"",
				// 截至时间
				nowTime:0,
				// 数据列表
				ChinaList:[],
				// 前两天数据
				Last:[],
				ymTotal:0,
				ymAdd:0,
				ymHundred:0,
				// 数据说明模态框
				show:false,
				showEAdd:true,
				showENow:false,
				// 本土现有确诊图表显示
				option : {
				    tooltip: {
				        trigger: 'axis'
				    },
				    
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    
				    xAxis: {
				        type: 'category',
				        boundaryGap: false,
				        data: []
				    },
				    yAxis: {
				        type: 'value'
				    },
				    series: [
				        {
				            name: '现有确诊数量',
				            type: 'line',
				            itemStyle: {
				                     normal: {
				                       color: "#be2121",//折线点的颜色
				                       lineStyle: {
				                       color: "#be2121"//折线的颜色
				                      }
				                    }
				              },			
				            data: []
				        },
				        
				    ]
				},
				// 本土累计确诊图表显示
				optionAdd : {
				    tooltip: {
				        trigger: 'axis'
				    },
				    
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '3%',
				        containLabel: true
				    },
				    
				    xAxis: {
				        type: 'category',
				        boundaryGap: false,
				        data: []
				    },
				    yAxis: {
				        type: 'value'
				    },
				    series: [
				        {
				            name: '新增确诊数量',
				            type: 'line',
				            itemStyle: {
				                     normal: {
				                       color: "#be2121",//折线点的颜色
				                       lineStyle: {
				                       color: "#be2121"//折线的颜色
				                      }
				                    }
				              },			
				            data: []
				        },
				        
				    ]
				},
				
			}
		},
		onLoad() {
			this.getDate();
			this.getChinaList();
			this.getVacinne();
			this.getProvince();
			this.getCity();
			this.latestLocalCity();
		},
		onPageScroll(e) {
				this.scrollTop = e.scrollTop;
		},
		methods: {
			// 获取疫情数据
			latestLocalCity(){
				uni.request({
					url:'https://api.inews.qq.com/newsqa/v1/query/inner/publish/modules/list?modules=statisGradeCityDetail'
				}).then(res=>{
					this.latestLocal=res[1].data.data.statisGradeCityDetail;
					
				})
			},
			searchCity(){
				this.searchCityList=[];
				for(var i=0;i<this.cityList.length;i++){
					if(this.cityList[i].provinceName.search(this.search)>=0){		
						this.searchCityList.push(this.cityList[i]);
					}
					
				}	
			},
			handleToVaccine(){
				uni.switchTab({
					url:'../vaccine/vaccine'
				})
			},
			getCity(){
				uni.request({
					url:'https://route.showapi.com/2217-2?showapi_appid=623853&showapi_sign=773c86931743478cb8dd6bdfd0458350'
				}).then(res=>{			
					this.cityList=res[1].data.showapi_res_body.todayDetailList;		
				})
			},	
			showAdd1(){
				this.showEAdd2=false;
				this.showEAdd3=false;
				this.showEAdd4=false;
				this.showEAdd1=true;
				this.color1 = "primary";
				this.color2="";
				this.color3="";
				this.color4="";		
			},
			showAdd2(){
				this.showEAdd1=false;
				this.showEAdd3=false;
				this.showEAdd4=false;
				this.showEAdd2=true;
				this.color2 = "primary";
				this.color1="";
				this.color3="";
				this.color4="";		
			},
			showAdd3(){
				this.showEAdd1=false;
				this.showEAdd2=false;
				this.showEAdd4=false;
				this.showEAdd3=true;
				this.color3 = "primary";
				this.color1="";
				this.color2="";
				this.color4="";
				
				
			},
			showAdd4(){
				this.showEAdd2=false;
				this.showEAdd3=false;
				this.showEAdd1=false;
				this.showEAdd4=true;
				this.color4 = "primary";
				this.color1="";
				this.color3="";
				this.color2="";
				
				
				
			},
			showAddPro(){
				this.showENowConfirm=false;
				this.showEAddPro=true;
				this.colorAPro = "primary";
				this.colorNConfirm="";
			},
			showNowConfirm(){
				this.showENowConfirm=true;
				this.showEAddPro=false;
				this.colorNConfirm="primary"
				this.colorAPro = ""
			},
			// 新增无症状感染者省份图表
			 getProvince(){
				uni.request({
					url:'https://api.inews.qq.com/newsqa/v1/query/inner/publish/modules/list?modules=asymptomaticProvince'
				}).then(res=>{
					this.provinceIn=res[1].data.data.asymptomaticProvince.increase
					this.provinceConfirm=res[1].data.data.asymptomaticProvince.confirm
					for(var i=0;i<this.provinceIn.length;i++){
						if(this.provinceIn[i].increase!=0){
							
							this.optionPro.xAxis.data.push(this.provinceIn[i].province);
							this.optionPro.series[0].data.push(this.provinceIn[i].increase);
							
						}
					}
					for(var i=0;i<this.provinceConfirm.length;i++){
						if(this.provinceConfirm[i].confirm!=0){
							this.optionConfirm.xAxis.data.push(this.provinceConfirm[i].province);
							this.optionConfirm.series[0].data.push(this.provinceConfirm[i].confirm);
						}
					}
				})
			},	
			// 控制图表
			showAdd(){
				this.showENow=false;
				this.showEAdd=true;
				this.colorA = "primary";
				this.colorN="";
			},
			showNow(){
				this.showENow=true;
				this.showEAdd=false;
				this.colorN="primary"
				this.colorA = ""
			},
			// 数据说明
			handleExplain(){
				this.show=true;
			},
			// 疫苗跟踪
			getVacinne(){
				uni.request({
					url:'https://api.inews.qq.com/newsqa/v1/automation/modules/list?modules=VaccineTopData'
				}).then(res=>{
					this.ymTotal=res[1].data.data.VaccineTopData.中国.total_vaccinations;
					this.ymAdd=res[1].data.data.VaccineTopData.中国.new_vaccinations;
					this.ymHundred=res[1].data.data.VaccineTopData.中国.total_vaccinations_per_hundred;
				})
			},
			// 获取数据
			getChinaList(){
				uni.request({
					url:'https://api.inews.qq.com/newsqa/v1/query/inner/publish/modules/list?modules=chinaDayList,chinaDayAddList,nowConfirmStatis,provinceCompare'
				}).then(res=>{
					var ChinaListLength=res[1].data.data.chinaDayList.length;
					this.ChinaList=res[1].data.data.chinaDayList[ChinaListLength-1];
					this.Last=res[1].data.data.chinaDayList[ChinaListLength-2];
					
					for(var i=0;i<ChinaListLength;i++){
						// 现有确诊图表
					
							this.optionAdd1.xAxis.data.push(res[1].data.data.chinaDayList[i].date);
							this.optionAdd1.series[0].data.push(res[1].data.data.chinaDayList[i].nowConfirm);
							
							this.optionAdd2.xAxis.data.push(res[1].data.data.chinaDayAddList[i].date);
							this.optionAdd2.series[0].data.push(res[1].data.data.chinaDayAddList[i].confirm);
							this.optionAdd2.series[1].data.push(res[1].data.data.chinaDayAddList[i].suspect);
							
							this.optionAdd3.xAxis.data.push(res[1].data.data.chinaDayList[i].date);
							this.optionAdd3.series[0].data.push(res[1].data.data.chinaDayList[i].confirm);
							this.optionAdd3.series[1].data.push(res[1].data.data.chinaDayList[i].heal);
							this.optionAdd3.series[2].data.push(res[1].data.data.chinaDayList[i].dead);
							
							this.optionAdd4.xAxis.data.push(res[1].data.data.chinaDayList[i].date);
							this.optionAdd4.series[0].data.push(res[1].data.data.chinaDayList[i].healRate);
							this.optionAdd4.series[1].data.push(res[1].data.data.chinaDayList[i].deadRate);
						
						this.option.xAxis.data.push(res[1].data.data.chinaDayList[i].date);
						this.option.series[0].data.push(res[1].data.data.chinaDayList[i].localConfirm);	
						// 新增确诊图表
						this.optionAdd.xAxis.data.push(res[1].data.data.chinaDayAddList[i].date);
						this.optionAdd.series[0].data.push(res[1].data.data.chinaDayAddList[i].localConfirmadd);
					}
					
					// this.option.xAxis.data=res[1].data.data.chinaDayList
					// this.ELocal=res[1].data.data.chinaDayList
					
				})
			},
			getDate(type) {
				// 获取当前系统时间
				let date = new Date();
				
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				let hours = date.getHours();
				let minutes = date.getMinutes();
							
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				hours = hours > 9 ? hours : '0' + hours;
				minutes = minutes >9  ? minutes : '0' + minutes;
				this.nowTime=`${year}-${month}-${day} ${hours}:${minutes}`
				
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.none{
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
	.special_add{
		
	}
	.latest{
		display: flex;
		justify-content: space-between;
		margin-bottom: 10rpx;
	}
	.latestLocal{
		background-color: #fff;
		background-image: url(https://mat1.gtimg.com/news/feiyanarea/btn_fxdq.png);
		background-size: 100% 100%;
		width:136rpx;
		height: 44rpx;
	}
	.u-search{
		width: 680rpx;
	}
	.infoBox{
		width:90%;
		margin:0 auto;
		background-color: #f8f8f8;
		height:964rpx;
		border-radius: 1.6vw;
		.person{
			font-size:26rpx;
		}
		.personTip{
			color:#222;
			font-size: 24rpx;
			.personText{
				margin-bottom: 10rpx;
				display: flex;
				justify-content: start;
				.box{
					margin: 15rpx 10rpx 0 20rpx ;
					width: 8rpx;
					height: 8rpx;
					border-radius: 0.533vw;
					background-color: #005dff;
				}
				
				
			}
		}
	}
	.info{
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		display:flex;
		justify-content: center;
	}
	.tipa{
		font-size: 24rpx;
		color:#737373;
		margin-top: 20rpx;
		margin-left: 60rpx;
	}
	.China{
	
		margin-top: 30rpx;
		.ChinaTitle{
			margin-left: 60rpx;
			font-size: 32rpx;
			color:#222;
			font-weight: 700;
		}
		.tips{
			margin-left: 60rpx;
			color:#737373;
			font-size: 24rpx;
		}	
		.table{
			margin: auto auto;
			width:90%;
			margin-top: 30rpx;
		}
	}
	// 图表按钮
	.eButton{
		width: 90%;
		display: flex;
		justify-content: center;
		margin: auto auto;
		margin-top:15rpx ;
		.addLocal{
			height: 88rpx;
			width: 45%;
			font-size: 24rpx;
			margin-right: 10rpx;
			
		}
		.nowLocal{
			width:45%;
			font-size: 24rpx;
		}
	}
	.eheader{
		color: #222;
		font-weight: 700;
		font-size:28rpx;
		position: relative;
		padding-left: 60rpx;
		top: 88rpx;
	}
			
	.echart_card{
		border: 2rpx solid #efefef;
		border-radius: 1.6vw;
		height: 420rpx;
		width:90%;
		margin: auto auto;
		.echart_img{
			padding-bottom: 100rpx;
		}
		
	}
	.modal_text{
		font-weight: 400;
		color:#222;
		font-size: 24rpx;
	}
	// 头部
	.header_bg{
		width: 100%;
		height: 364rpx;
		.header_bgimg{
			background: url(https://mat1.gtimg.com/news/feiyanarea/head_bg_new.png) top;
			background-size: cover;
			width: 100%;
			height: 364rpx;
			position: relative;
			.header_title{
				position: absolute;
				background: url(../../static/head_title.png);
				background-size: 100% 100%;
				width: 380rpx;
				height: 124rpx;
				left: 25%;
				top: 25%;
			}
			.header_text{
				padding-top: 300rpx;
				padding-left: 19%;
				color:#fff;
				font-size:24rpx;
			}
		}
	}
	// 疫苗跟踪
	.ymTop{
		margin-top: 18rpx;
		width: 670rpx;
		height: 198rpx;
		border:2rpx solid #efefef;
		.ymTop_header{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 20rpx 0 20rpx 0;
			padding-left: 10rpx;
			padding-right:10rpx;
			.ymTitle{
				color: #222;
				font-weight: 500;
				font-size:28rpx
			}
			.ymDetail{
				color: #7c7c7c;
				font-size: 24rpx;
			}
			}
		.ymContent{
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: center;
			text-align: center;
			margin-top: 6rpx;
			.ymContentBox{
				width: 33.33%;
				border-right: 2rpx solid #ccc;
				.ymTotal{
					display: flex;
					justify-content: center;
					color:#178b50;
					.ymNum{
						font-size: 38rpx;
						font-weight:700;
					}
					.ymText{
						padding-Top:10rpx;
					}
				}
			}
			.ymContentBox2{
				width: 33.33%;
				border-right: 2rpx solid #ccc;
				.ymAdd{
					display: flex;
					justify-content: center;
					color:#e57631;
					.ymNum{
						font-size: 38rpx;
						font-weight:700;
					}
					.ymText{
						padding-Top:10rpx;
					}
				}
			}
			.ymContentBox3{
				width: 33.33%;
				.ymRate{
					display: flex;
					justify-content: center;
					color:#4e5a65;
					.ymNum{
						font-size: 38rpx;
						font-weight:700;
					}
					.ymText{
						padding-Top:10rpx;
					}
				}
			}
			
		}
		
	}
	// 死亡人数
	.dead_text{
		text-align: center;
		.add{
			color:#7c7c7c;
			padding-top: 12rpx;
			font-size: 24rpx;
			height: 32rpx;
			.computeList{
				color:#4e5a65;
			}
		}
		.number{
			color:#4e5a65;
			font-size:44rpx;
			padding-top: 12rpx;
			font-weight:600;
			height: 56rpx;
		}
		.text{
			margin-top: 12rpx;
			font-size: 24rpx;
			color:#222;
			height: 24rpx;
		}
	}
	// 境外输入
	.import_text{
		text-align: center;
		.add{
			color:#7c7c7c;
			padding-top: 12rpx;
			font-size: 24rpx;
			height: 32rpx;
			.computeList{
				color:#4e8be6;
			}
		}
		.number{
			color:#4e8be6;
			font-size:44rpx;
			padding-top: 12rpx;
			font-weight:600;
			height: 56rpx;
		}
		.text{
			margin-top: 12rpx;
			font-size: 24rpx;
			color:#222;
			height: 24rpx;
		}
	}
	// 无症状感染者
	.nowSevere_text{
		text-align: center;
		.add{
			color:#7c7c7c;
			padding-top: 12rpx;
			font-size: 24rpx;
			height: 32rpx;
			.computeList{
				color:#ae3ac6;
			}
		}
		.number{
			color:#ae3ac6;
			font-size:44rpx;
			padding-top: 12rpx;
			font-weight:600;
			height: 56rpx;
		}
		.text{
			margin-top: 12rpx;
			font-size: 24rpx;
			color:#222;
			height: 24rpx;
		}
	}
	// 确诊人数
	.confirm_text{
		text-align: center;
		.add{
			color:#7c7c7c;
			padding-top: 12rpx;
			font-size: 24rpx;
			height: 32rpx;
			.computeList{
				color:#be2121;
			}
		}
		.number{
			color:#be2121;
			font-size:44rpx;
			padding-top: 12rpx;
			font-weight:600;
			height: 56rpx;
		}
		.text{
			margin-top: 12rpx;
			font-size: 24rpx;
			color:#222;
			height: 24rpx;
		}
	}
	// 现有确诊
	.nowConfirm_text{
		text-align: center;
		.add{
			.computeList{
				color:#e61c1d;
			}
			color:#7c7c7c;
			padding-top: 12rpx;
			font-size: 24rpx;
			height: 32rpx;
			.computeList{
				
			}
		}
		.number{
			color:#e61c1d;
			font-size:44rpx;
			padding-top: 12rpx;
			font-weight:600;
			height: 56rpx;
		}
		.text{
			margin-top: 12rpx;
			font-size: 24rpx;
			color:#222;
			height: 24rpx;
		}
	}
	// 本土现有确诊
	.localConfirm_text{
		text-align: center;
		.add{
			.computeList{
				color:#e57631;
			}
			padding-top: 12rpx;
			font-size: 24rpx;
			color:#7c7c7c;
			height: 32rpx;
		}
		.number{
			color:#e57631;
			font-size:44rpx;
			padding-top: 12rpx;
			font-weight:600;
			height: 56rpx;
		}
		.text{
			margin-top: 12rpx;
			font-size: 24rpx;
			color:#222;
			height: 24rpx;
		}
	}
	.time{
		font-weight: 500;
		color: #222;
		height: 96rpx;
		line-height: 96rpx;
		margin: auto 0;
		
	}
	.content{
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	.u-row {
		display: flex;
		justify-content: space-between;
		margin: 0 4rpx 4rpx 0;
	}
	.demo-layout {
		width:222rpx;
		height: 160rpx;
		border-radius: 8rpx;
	}
	
	.localConfirm {
		background: #fffaf7;
	}
	
	.nowConfirm {
		background: #e8effc;
	}
	
	.confirm {
		background: #fdeeee;
	}
	.nowSevere{
		background: #e9f7ec;
	}
	.import{
		background: #f1f5ff;
	}
	.dead{
		background: #f3f6f8;
	}
</style>
